<template>
  <div class="box">
    <!-- 顶部导航 -->
    <van-nav-bar title="个人中心" left-arrow @click-left="$emit('close')" />
    <!-- 头像 -->
    <div class="PortraitBox">
      <van-image class="headPortrait" round fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" />
    </div>

    <van-form
      @submit="onSubmit"
      class="userForm"
      :show-error="false"
      :validate-first="true"
      error-message-align="left"
    >
      <van-cell-group>
        <van-field
          v-model.trim="username"
          name="昵称"
          clearable
          placeholder="昵称"
          :rules="userFormRules.name"
        >
          <i slot="left-icon" class="iconfont icon-geren"></i>
        </van-field>

        <van-field
          v-model.trim="phone"
          name="手机号"
          clearable
          placeholder="手机号"
          :rules="userFormRules.mobile"
          type="number"
        >
          <i slot="left-icon" class="iconfont icon-shouji1"></i>
        </van-field>

        <van-field
          v-model.trim="position"
          name="地址"
          clearable
          placeholder="地址"
          :rules="userFormRules.site"
        >
          <i slot="left-icon" class="iconfont icon-dizhi"></i>
        </van-field>

        <div style="margin: 16px" class="floor">
          <van-button
            round
            block
            type="info"
            color="linear-gradient(to right, #ff6034, #ee0a24)"
          >确认修改</van-button>
        </div>
      </van-cell-group>
    </van-form>
  </div>
</template>

<script>
// 导入修改用户信息请求方法
import { editUser } from '@/api/my.js'
export default {
  name: 'editUser',
  data () {
    return {
      username: '', // 用户输入的昵称
      phone: '', // 用户输入的手机号
      position: '', // 用户地址
      // 校验表单数据
      userFormRules: {
        // 用户昵称验证规则
        name: [{
          required: true,
          message: '昵称不能为空'
        }, {
          // 匹配中文，英文字母和数字及下划线
          pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9_]{2,6}$/,
          message: '昵称格式错误'
        }],
        // 手机号验证规则
        mobile: [{
          required: true,
          message: '手机号不能为空'
        }, {
          pattern: /^1[3|5|7|8]\d{9}$/,
          message: '手机号格式错误'
        }],
        // 地址验证规则
        site: [{
          required: true,
          message: '地址不能为空'
        }, {
          // 匹配中文，英文字母和数字
          pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]{6,15}$/,
          message: '地址格式错误'
        }]
      }
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    // 点击提交按钮 获取表单里的所有数据
    async onSubmit (value) {
      try {
        const { data } = await editUser({
          name: this.username,
          phone: this.phone,
          position: this.position
        })
        console.log(data)
        this.$toast.success('修改成功')
        this.$emit('close')
      } catch (err) {
        console.log(err)
        this.$toast('修改失败!')
      }
      this.username = ''
      this.phone = ''
      this.position = ''
    }
  }
}
</script>

<style scoped lang="less">
.box {
  .PortraitBox {
    margin-top: 30px;
    height: 100px;
    .headPortrait {
      width: 80px;
      height: 80px;
      position: absolute;
      left: 50%;
      transform: translate(-50%, 15%);
    }
  }
  .userForm {
    margin-top: 50px;
    margin: 0 70px;
    /deep/ .van-cell {
      border-bottom: 1px solid rgba(255, 138, 84, 1);
      padding: 15px 0;
    }
    .icon-dizhi:before {
      content: '\e613';
      font-size: 30px;
      color: #e60e;
    }
    .icon-geren:before {
      content: '\e60c';
      font-size: 30px;
      color: #e606;
    }
    .icon-shouji1:before {
      content: '\e60f';
      font-size: 30px;
      color: #e60f;
    }
  }
  .floor {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
  /deep/ .van-field__label {
    margin-right: 0px;
  }
  /deep/ .van-nav-bar {
    background: linear-gradient(to left, #ff8534, #ee0a24);
    .van-nav-bar__title {
      color: #fff;
    }
    .van-icon-arrow-left::before {
      color: #fff;
    }
  }
}
</style>
